import React, { useState } from 'react'
import { View, Image, Text, StyleSheet } from 'react-native'
import icon_daily from '../../../assets/icon_daily.png';
import icon_search from '../../../assets/icon_search.png';
import { TouchableOpacity } from 'react-native-gesture-handler';

export default function TitleBar() {

  const [tabIndex, setTabIndex] = useState(1)

  return (
    <View style={styles.titleLayout}>
      <TouchableOpacity activeOpacity={0.7}>
        <Image source={icon_daily} style={styles.titleIcon} />
      </TouchableOpacity>
      <TouchableOpacity onPress={()=> setTabIndex(0) } >
        <View style={[styles.btnLayout, tabIndex === 0 && styles.showBtn]}>
          <Text style={[styles.btnTxt, tabIndex === 0 && styles.showBtnTxt]}>
            关注
          </Text>
        </View>
      </TouchableOpacity>
      <TouchableOpacity onPress={()=> setTabIndex(1) } >
        <View style={[styles.btnLayout, tabIndex === 1 && styles.showBtn]}>
          <Text style={[styles.btnTxt, tabIndex === 1 && styles.showBtnTxt]}>
            发现
          </Text>
        </View>
      </TouchableOpacity>
      <TouchableOpacity onPress={()=> setTabIndex(2) } >
        <View style={[styles.btnLayout, tabIndex === 2 && styles.showBtn]}>
          <Text style={[styles.btnTxt, tabIndex === 2 && styles.showBtnTxt]}>
            更多
          </Text>
        </View>
      </TouchableOpacity>
      <TouchableOpacity>
        <Image source={icon_search} style={styles.titleIcon} />
      </TouchableOpacity>
    </View>
  )
}

const styles = StyleSheet.create({
  titleLayout: {
    width: "100%",
    height: 40,
    flexDirection: 'row',
    alignItems: "center",
    justifyContent: "space-between",
    paddingHorizontal: 20,
    marginVertical: 4
  },
  titleIcon: {
    width: 20,
    height: 20,
    resizeMode: "contain"
  },

  btnLayout: {
    marginHorizontal: 10,
    paddingVertical: 5,
    width: 46
  },
  showBtn: {
    borderBottomWidth: 2,
    borderBottomColor: '#333',
    borderRadius: 1
  },
  btnTxt: {
    textAlign: "center"
  },
  showBtnTxt: {
    fontSize: 16,
    color: "#333"
  }
})